<script setup lang="ts">
import { reactive } from "vue";
import splitpane, { ContextProps } from "@/components/SplitPane";

const settingLR: ContextProps = reactive({
	minPercent: 20,
	defaultPercent: 40,
	split: "vertical"
});

const settingTB: ContextProps = reactive({
	minPercent: 20,
	defaultPercent: 40,
	split: "horizontal"
});
</script>

<template>
	<div class="split-pan h-full bg-white">
		<splitpane :splitSet="settingLR">
			<!-- #paneL 表示指定该组件为左侧面板 -->
			<template #paneL>
				<!-- 自定义左侧面板的内容 -->
				<div class="dv-a">A</div>
			</template>
			<!-- #paneR 表示指定该组件为右侧面板 -->
			<template #paneR>
				<!-- 再次将右侧面板进行拆分 -->
				<splitpane :splitSet="settingTB">
					<template #paneL>
						<div class="dv-b">B</div>
					</template>
					<template #paneR>
						<div class="dv-c">C</div>
					</template>
				</splitpane>
			</template>
		</splitpane>
	</div>
</template>
